<template>
	<view class="container">
		<home-page v-if="tabbarIndex==0"></home-page>
		<video-page v-if="tabbarIndex==1"></video-page>
		<my-page v-if="tabbarIndex==2"></my-page>
		<view class='tabbar_box'>
		  <view :class="tabbarIndex == index?'tabbar_nav active':'tabbar_nav' " v-for="(item,index) in tabbar" :key='index' @tap="tabbarclick(index)">
			<image :src='tabbarIndex == index ? item.active_icon : item.icon'></image>
			<text>{{item.name}}</text>
		  </view>
		</view>
	</view>
</template>

<script>
	export default{	
		data(){
			return{
				tabbar: [
				  { name: '接诊记录', icon: '/static/index_03.png', active_icon:'/static/index_06.png' },
				  { name: '开始接诊', icon: '/static/index_24.png', active_icon:'/static/index_25.png' },
				  { name: '账号管理', icon: '/static/index_05.png', active_icon:'/static/index_08.png'},
				],
				tabbarIndex:0
			}
		},
		methods:{
			tabbarclick(index){
				console.log(index)
				this.tabbarIndex = index 

			} 
		}
 
		 
	}
</script>

<style>
	.tabbar_box{
	  position: fixed;
	  bottom:0;
	  left:0;
	  width:100%;
	  height:100rpx;
	  z-index: 99;
	  background-color:#ffffff;
	  color:#666666;
	  font-size:26rpx;
	  padding-top:20rpx;
	  display: flex;
	  border-top: 1px solid #c1c1c1;
	}
	.tabbar_nav{
	  text-align: center;
	  width:33.33%;
	  font-size: 24rpx;
	  background-color:#ffffff;
	}
	.tabbar_nav image{
	  width:50rpx;
	  height:50rpx;
	}
	.tabbar_nav text{
	  line-height: 30rpx;
	  display: block
	}
	.tabbar_box .active{
	  color:#108ec9
	}
	.tabbar_nav:nth-child(2) image{
	  width:100rpx;
	  height:90rpx;
	  /* border-color:#c1c1c1; */
	  display:inline-block;
	  /* background:#fff; */
	  /* border-radius:50rpx 50rpx 0 0;
	  border-width:1px 0px 0px 0px;
	  border-style:solid; */
	
	}
	.tabbar_nav:nth-child(2) text{
	  padding-top: 15rpx
	}
	.tabbar_nav:nth-child(2){
	  position: relative;
	  top: -66rpx;
	  background:none;
	}
</style>
